* {
    margin: 0px;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

[v-cloak] {
    display: none;
}

.myphoto {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.myphoto .tools {
    background: #000;
    color: #fff;
    height: 60px;display: flex;align-items: center;justify-content: flex-end;
}
.myphoto .tools > div{
 cursor: pointer;background: red;display: flex;align-items: center;border-radius: 17px;height: 34px;padding:0 15px;margin-right: 10px;line-height: 30px;
}


.myphoto .photoarea {
    position: relative;
    display: flex;align-items: center;justify-content: center;
    flex-grow: 1;
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    background-image: linear-gradient(45deg, #eee 25%, transparent 0, transparent 75%, #eee 0, #eee), linear-gradient(45deg, #eee 25%, #fff 0, #fff 75%, #eee 0, #eee);
}
.myphoto .photoarea .canshu{position: absolute;bottom: 20px;width: 300px;}

.myphoto .photoarea .load{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.myphoto .photoarea .err{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 150px;height: 150px;border-radius: 18px;background: rgba(0,0,0,.8);text-align: center;line-height: 150px;color: #fff;}
.myphoto .photoarea canvas{max-width: 80vw;max-height: calc(80vh - 254px);}
.myphoto .effects {
    background: #fff;
    height: 180px;border-top: solid 6px #aaa
}
.myphoto .effects ul{display: flex;align-items: center;justify-content: center;height: 100%;flex-wrap: wrap;}
.myphoto .effects ul li{width: 60px;text-align: center;margin: 0 10px;font-size: 12px;position: relative;}
.myphoto .effects ul li img{width: 60px;height:60px;border-radius: 100%;border:solid 2px #ddd;}
.myphoto .effects ul li .mark{border-radius: 100%;background: rgba(0,0,0,.6);width: 56px;height: 56px;position: absolute;top: 2px;left: 2px}
.myphoto .effects ul li.on {color: red}
.myphoto .effects ul li.on img{border-color: red;opacity: 1}
.myphoto .effects ul li canvas{width: 60px;height: 60px;border-radius: 100%;box-shadow: 0 1px 1px rgba(0,0,0,.6)}
@media screen and (max-width: 768px) {}